/* COPYRIGHT TVB NETWORK VERSION 1.0 ALL RIGHT RESERVED 2022 */
/* _header_ style */
:root{
	--_tTitleLg_TxC:#f1f1f1;
	--_bntLogIn_ind_:#fff;
	--_usrLginIco_:brightness(10);
}

/* Define CSS variables for light mode */
[data-theme="light"] {
	--_header_BGColor:rgba(22, 22, 23, 0.7);
	--_tTitle_TxtColor:#d1d1d1;
	--_bntLogIn_ind_BGColor:#1E90FF;
	--_bntSignUp_ind_BGColor:#1E90FF;
	--_tTitleLg_TxC:#f1f1f1;
	--_bntLogIn_ind_:#fff;
}


/* Dark mode variables */
[data-theme="dark"] {
	--_header_BGColor:#2B4F62;
	--_tTitle_TxtColor:#a1a1a1;
	--_bntLogIn_ind_BGColor:#00000070;
	--_bntSignUp_ind_BGColor:#00000070;
	--_tTitleLg_TxC:#d1d1d1;
	--_bntLogIn_ind_:#d1d1d1;
	--_usrLginIco_:unset;
}



._header_{
	width:100%;
	height:50px;
	background-color:var(--_header_BGColor);
	backdrop-filter: blur(10px); /* Apply blur effect */
    -webkit-backdrop-filter: blur(10px); /* For Safari */
	position:fixed;
	min-width:300px;
	top:0px;
	left:0px;
	z-index:2;
	display:flex;
	align-items:center;
}






._tvb_hl_{
	width:45%;
	height:100%;
	display:flex;
	align-items:center;
}


/* when login */
._tvb_hlLg_{
	width:45%;
	height:100%;
	display:flex;
	align-items:center;
}





/* this is the tvb main icon */
.tIcoOnView{
	width:32px;
	height:32px;
	cursor:pointer;
	margin:12px;
	margin-left:5%;
	margin-right:12px;
	vertical-align:-20px;
	display:inline-block;
	box-shadow:0 0 5px #00000040;
}




/* icon when log in */
.tIcoOnViewLg{
	width:32px;
	height:32px;
	cursor:pointer;
	margin:5px;
	margin-left:5%;
	margin-right:12px;
	vertical-align:-20px;
	display:inline-block;
	box-shadow:0 0 5px #00000040;
}






/* app title */
._tTitle_{
	width:auto;
	font-size:22pt;
	font-family:var(--TvbSUIBlack),UISBlack;
	display:inline-block;
	/* color:var(--color1); */
	color:var(--_tTitle_TxtColor);
}



/* title when log in */
._tTitleLg_{
	width:auto;
	font-size:19pt;
	font-family:var(--TvbSUIBlack),UISBlack;
	display:inline-block;
	color:var(--_tTitleLg_TxC);
}



/* here we create a div that will content the language,theme & apps  */






._cnt_lg_bnt_{
	margin-top:-2px;
	margin-right:10px;
	display:flex;
	height:40px;
}



/* log in button on top of the index */
._bntLogIn_ind_{
	font-size:10pt;
	display:inline-block;
	color:var(--_bntLogIn_ind_);
	padding:7px;
	margin:5px;
	/* background-color:#00000070; */
	background-color:var(--_bntLogIn_ind_BGColor);
	cursor:pointer;
	border-radius:3px;
}


._usrLginIco_{
	display:inline-block;
	width:20px;
	height:20px;
	margin-right:5px;
	filter:var(--_usrLginIco_);
}



/* this will contain the sign up button */
._bntSignUp_ind_{
	font-size:10pt;
	display:inline-block;
	color:var(--_bntLogIn_ind_);
	padding:7px;
	margin:5px;
	background-color:var(--_bntSignUp_ind_BGColor);
	cursor:pointer;
	border-radius:3px;
}





/*-----------------tablet style------------*/
@media screen and (max-width: 769px) {
	._tvb_hl_{
		width:68%;
	}
		
	
	/* this is the tvb main icon */
	.tIcoOnView{
		width:40px;
		height:40px;
		cursor:pointer;
		margin:10px;
		margin-left:1%;
		vertical-align:-20px;
		display:inline-block
	}
		
	._bottom_1{
		width:100%;
	}
	
	._btmBox_{
		width:calc(25% - 22px);
		margin-right:1px;
		#background-color:blue;
	}
	
	
}




/*-------------mobile style-------------*/
@media screen and (max-width: 480px) {
	
	._header_{
		height:50px;
		min-width:200px;
	}
	
	
	
	/* app title */
	._tTitle_{
		font-size:19pt;
	}
	
	/* title when log in */
	._tTitleLg_{
		width:auto;
		min-width:210px;
		font-size:19pt;
		font-family:var(--TvbSUIBlack),UISBlack;
		display:inline-block;
		color:var(--_tTitleLg_TxC);
		
	}

	
	._tvb_hl_{
		width:calc(100% - 0px);
	}
	
	
	
	._tvb_hlLg_{
		/* width:50px; */
		width:calc(100% - 100px);
	}
	
	
	
	._cnt_lg_bnt_{
		display:none;
		visibility:hidden;
		margin-top:0px;
		
	}
	
	.tIcoOnView{
		margin-left:2%;
		margin-right:8px;
		width:30px;
		height:30px;
	}
	
	
	.tIcoOnViewLg{
		margin-left:2%;
		margin-right:8px;
		width:30px;
		height:30px;
	}
	
	
	
	/* log in button in the main destop view */
	._bntLogIn_ind_{
		visibility:hidden;
	}
	
	/* sign up button in the main dstp v */
	._bntSignUp_ind_{
		visibility:hidden;
	}
}












/* Styles for Galaxy Fold in landscape mode */
@media screen and (min-width: 280px) and (max-width: 320px) and (max-height: 600px) and (orientation: landscape) {
  /* Your styles for Galaxy Fold in landscape mode go here */
}

/* Styles for Galaxy Fold in portrait mode */
@media screen and (min-width: 280px) and (max-width: 320px) and (min-height: 601px) and (orientation: portrait) {
	/* Your styles for Galaxy Fold in portrait mode go here */
  	._tvb_hl_{
		width:calc(100% - 80px;)
	}
	
	._header_{
		height:40px;
		min-width:200px;
	}
	
	/* this is the tvb main icon */
	.tIcoOnView{
		width:30px;
		height:30px;
		cursor:pointer;
		margin:5px;
		margin-left:1%;
		vertical-align:-20px;
		display:inline-block
	}
	
	
	._msetBox_{
		min-width:250px;
		width:250px;
	}
}